<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历详情</title>
    <link rel="stylesheet" href="./css/base.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        body {
            margin-bottom: 3rem;
        }

        .container {
            /* background: pink; */
            width: 100%;
        }

        .top-container {
            /* background: plum; */
            width: 100%;
            padding: 1rem;
        }

        .top-container .top-name {
            /* background: powderblue; */
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px #ddd solid;

        }

        .top-container .top-name .has-tit {
            width: 70%;
            height: 100%;
        }

        .top-container .top-name .has-tit .has-name {
            font-size: 1.33em;
            font-weight: bold;
            padding: 0.7rem 0rem 0.3rem 0rem;
        }

        .top-container .top-name .has-img {
            width: 4rem;
            height: 4rem;
            /* background: rosybrown; */
            margin-right: 2rem;
        }

        .top-container .top-name .has-img img {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            padding: 0.15rem;
        }

        .top-container .top-main {
            /* background: royalblue; */
            width: 100%;
            display: flex;
            justify-content: flex-start;
            padding-bottom: 1rem;
            border-bottom: 1px #ddd solid;
        }

        .top-container .top-main .left-box {
            width: 50%;
        }

        .top-container .top-main .left-box p {
            padding: 1rem 0rem 0rem 0rem;
        }

        .top-container .top-main .right-box {
            width: 50%
        }

        .top-container .top-main .right-box p {
            padding: 1rem 0rem 0rem 0rem;
        }

        .main-container {
            width: 100%;
            padding: 0rem 0.5rem 0rem 0.5rem;
        }

        .main-container .has-border {
            border-bottom: 1px #ddd solid;
            padding-bottom: 1em;
            padding-top: 1em;
        }

        .main-container .has-border h3 {
            display: block;
            font-size: 1.17em;
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            padding-bottom: 0.3em;
        }

        .main-container .has-video {
            padding-top: 0em;
            padding-bottom: 1em;
            width: 100%;
            min-height: 8rem;
            position: relative;
        }

        .main-container .has-video .tips {
            color: red;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 50%;
            transform: translateX(-50%);
        }

        .main-container .has-border .main-content {
            display: flex;
            justify-content: space-between;
        }

        .has-p {
            color: #888888;
            word-break:break-all;
        }

        .has-tag {
            border: 1px #888 solid;
            font-size: 0.2em;
            padding: 0.1em 0.2em 0.1em 0.2em;
            border-radius: 8px;
            color: #888;
            white-space: nowrap;
            display: inline-block;
            margin-bottom: 2px;
        }

        .tool-bar {
            width: 100%;
            height: 3rem;
            position: fixed;
            background: #fff;
            bottom: 0px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .btn-box .btn {
            background-color: #169bd4;
            border: none;
            padding: 10px;
            color: #fff;
            width: 4.6rem;
            /* font-size: 15px; */
            /* margin: 25px auto; */
            border-radius: 7px;
        }

        .show {
            display: block;
        }

        .hidden {
            display: none;
        }

        .main-container .has-mate .has-img {
            width: 5rem;
            height: 5rem;
            background: peru;
            display: inline-block;
        }

        /* 全屏相框开始 */
        #fullPage {
            display: none;
            background: black;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 19930428;
        }

        #fullPage img {
            display: block;
            width: 100%;
        }

        #canvas {
            width: 100%;
            height: 100%;
            background: none;
            display: block;
        }

        /* 全屏相框结束 */
    </style>
</head>

<body>
    <div class="container">
        <div class="top-container">
            <div class="top-name">
                <div class="has-tit">
                    <p class="has-name">谭小庆</p>
                    <p class="has-sex">男</p>
                </div>
                <div class="has-img">
                    <img id="head" src="image/t1.png" />
                </div>
            </div>
            <div class="top-main">
                <div class="left-box">
                    <p>学校：吉林北华大学</p>
                    <p>电话：13103103013</p>
                    <p>邮箱：2444234234@qq.com</p>
                </div>
                <div class="right-box">
                    <p>学历：本科</p>
                    <p>专业：计算机科学与技术</p>
                    <p>毕业年份：2017</p>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="has-video has-border">
                <h3>视频简历</h3>
                <div class="has-video" style="background:#F9F9F9 ;">
                    <video class="hidden" width="100%" controls>
                        <source src="" type="video/mp4">
                    </video>
                    <div class="show tips">无视频简历</div>

                </div>

            </div>
            <div class="has-light has-border">
                <h3>我的亮点</h3>
                <p class="main-content has-p">能加班为企鹅去aasdasdasdasdasddasdadasdasdasdadadasdasdasdasdasdadsadasdasdasdasd</p>
            </div>
            <div class="has-job has-border">
                <h3>求职意向</h3>
                <div class="main-content">
                    <div class="left-content">
                        <p class="has-tit">全职长春市</p>
                        <p class="has-p">web</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">20k~30k</p>
                    </div>
                </div>
            </div>
            <div class="has-skill has-border">
                <h3>技能标签</h3>
                <span class="has-tag">篮球</span>
                <span class="has-tag">敲代码</span>
                <span class="has-tag">篮球</span>
            </div>
            <div class="has-edu has-border">
                <h3>教育背景</h3>
                <div class="main-content">
                    <div class="left-content">
                        <p class="has-tit">全职长春市</p>
                        <p class="has-p">web</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">20k~30k</p>
                    </div>
                </div>
            </div>
            <div class="has-exp has-border">
                <h3>实践经历</h3>
                <div class="main-content">
                    <div class="left-content">
                        <p class="has-tit">全职长春市</p>
                        <p class="has-p">web</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">20k~30k</p>
                    </div>
                </div>
            </div>
            <div class="has-award has-border">
                <h3>荣誉奖励</h3>
                <div class="main-content">
                    <div class="left-content">
                        <p class="has-tit">全职长春市</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">2018-10</p>
                    </div>
                </div>
            </div>
            <div class="has-mate has-border">
                <h3>证明材料</h3>
                <div id="imgBox">
                    <img class="has-img" id="img" src="image/t1.png" />
                    <img class="has-img" id="img2" src="image/t2.png">
                    <img class="has-img" id="img3" src="image/t3.png">
                    <img class="has-img" id="img4" src="image/t3.png">
                </div>
            </div>
        </div>
    </div>
    <div class="tool-bar">
        <div class="btn-box">
            <button class="btn" onclick = "communicate()">立即沟通</button>
        </div>
        <div class="btn-box">
            <button class="btn " id="invite">面试邀约</button>
            <button class="btn hidden" style="background:#999999;">面试邀约</button>
        </div>
        <div class="btn-box">
            <button class="btn " onclick = "collect()">收藏</button>
            <button class="btn hidden" style="background:#999999;">已收藏</button>
        </div>
        <div class="btn-box">
            <button class="btn" id="out">不合适</button>
        </div>
    </div>
    <div id="fullPage">
        <canvas id="canvas"></canvas>
    </div>
    <script src="./js/photo.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jqAlert2.js"></script>
    <script type="text/javascript">
        //使用方法
        var wxScale = new WxScale({
            fullPage: document.querySelector("#fullPage"),
            canvas: document.querySelector("#canvas")
        });

        var imgBox = document.querySelectorAll("#imgBox img");
        for (var i = 0; i < imgBox.length; i++) {
            imgBox[i].onclick = function (e) {
                wxScale.start(this);   //这里的this指向需要放大的这张图片
            }
        }
        function communicate(){
            alert("聊聊吧")
        }
       
        function collect(){
            alert("还不错收藏")
        }
        $('#out').click(
        function (e) {
        //第一个参数是提示信息
        //第二个参数是点击确定的回调函数，如果需要操作数据，必须传参数event
        //第三个参数是获取当前事件的，不传获取不到节点
        jqAlert.Confirm('请确认',function (event) {
            console.log($(event).attr('id'));
            console.log(event.id);
            console.log(e.target.id);
            $('#out').css('background','#ddd')
            $('#out').unbind("click");
        },e);
    })
    </script>
</body>


</html>